import React, { useState, useRef } from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Button } from '../../components';
import BaseView from '../components/base-view'
export default (props: any) => {

  return (
    <ScrollView style={{ backgroundColor: '#f2f2f2', flex: 1, width: '100%', }}>
      <BaseView title="按钮类型">
        <Button style={styles.mrb} type="default">默认按钮</Button>
        <Button style={styles.mrb} type="primary">主要按钮</Button>
        <Button style={styles.mrb} type="success">成功按钮</Button>
        <Button style={styles.mr} type="warning">警告按钮</Button>
        <Button type="danger">危险按钮</Button>
      </BaseView>

      <BaseView title="朴素按钮">
        <Button style={styles.mr}  type="primary" plain>朴素按钮</Button>
        <Button type="success" plain>朴素按钮</Button>
      </BaseView>

      <BaseView title="禁用状态">
        <Button style={styles.mr} disabled type="primary">禁用状态</Button>
        <Button style={styles.mr} disabled type="success">禁用状态</Button>
      </BaseView>

      <BaseView title="按钮形状">
        <Button style={styles.mrb}   type="primary">方形按钮</Button>
        <Button style={styles.mrb} borderRadius='22' type="success">圆形按钮</Button>
        <View style={{width:'100%'}}><Button style={{width:120}} borderRadius='8' type="success">自定义圆角按钮</Button></View>
      </BaseView>

      <BaseView title="图标按钮">
        <Button style={styles.mr} icon="infocirlce" type="primary"></Button>
        <Button style={styles.mr} icon="swap" type="success">图标</Button>
      </BaseView>

      <BaseView title="自定义颜色">
        <Button style={styles.mr} color="#e16c96">单色按钮</Button>
        <Button style={styles.mr} color="#fcd217" plain>单色按钮</Button>
      </BaseView>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  mr:{
    marginRight:20,
  },
  mrb: {
    marginRight: 20,
    marginBottom: 15,
  }
})